<script lang="ts" setup>
defineOptions({ name: 'ConfigureColumns' });

import { ref, onMounted } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";

const rowData = ref([]);

// Fetch data when the component is mounted
onMounted(async () => {
    rowData.value = await fetchData();
});

const colDefs = ref([
    { field: "mission" },
    { field: "company" },
    { field: "location" },
    { field: "date" },
    { field: "price" },
    { field: "successful" },
    { field: "rocket" },
]);

const defaultColDef = {
    filter: true
}

const fetchData = async () => {
    const response = await fetch(
        "https://www.ag-grid.com/example-assets/space-mission-data.json",
    );
    return response.json();
};

</script>

<template>
    <div style="width: 100%;height: 500px">
        <ag-grid-vue style="width: 100%; height: 100%" class="ag-theme-quartz" :defaultColDef="defaultColDef" :columnDefs="colDefs" :rowData="rowData">
        </ag-grid-vue>
    </div>
</template>
